import { Button } from 'antd-mobile'
import { List, Avatar } from 'antd-mobile'
import Nabar from '../../conpoment/Nabar'
import img from '../../img/image.png'
import img1 from '../../img/order-image1.png'
import img2 from '../../img/order-image2.png'
import img3 from '../../img/order-image3.png'
import img4 from '../../img/order-image4.png'
import img5 from '../../img/order-image5.png'
import img6 from '../../img/my.png'
import img7 from './img/image.png'
import { SetOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { useMemo } from 'react'
import style from './index.module.css'
function Index() {
  const nav = useNavigate()
  const data = [
    {
      img: img,
      name: '在线询问'
    },
    {
      img: img1,
      name: '健康档案'
    },
    {
      img: img2,
      name: '用药建议'
    },
    {
      img: img3,
      name: '优选订单'
    },
    {
      img: img4,
      name: '我的医生'
    },
    {
      img: img5,
      name: '随访计划'
    },
  ]
  // 移除了旧的滚动处理代码，现在使用全局Navbar组件
  const token = localStorage.getItem('token')
  const rawUser = localStorage.getItem('user')
  const displayName = useMemo(() => {
    if (!token) return ''
    if (!rawUser) return '用户'
    try {
      const parsed = JSON.parse(rawUser as string)
      return parsed?.nickname || parsed?.name || '用户'
    } catch {
      return rawUser || '用户'
    }
  }, [token, rawUser])
  return (
    <div className="page-with-static-navbar">
      <Nabar title='我的' sticky={false} />
      <div className={style.box}>
        <div className={style.userInfoContainer}>
          {/* 头像 */}
          <div className={style.userAvatarContainer}>
            <Avatar src='https://tse4-mm.cn.bing.net/th/id/OIP-C.K-2NX7_4iksBUkInld2iaAHaHa?w=198&h=197&c=7&r=0&o=7&cb=12&dpr=1.2&pid=1.7&rm=3' />
            {token ? (
              <span className={style.userName}>{displayName}</span>
            ) : (
              <Button size='small' color='primary' onClick={() => nav('/login')}>点击登录</Button>
            )}
          </div>
          <div className={style.settingsIcon}>
            <span onClick={() => nav('/set')}><SetOutline fontSize={20} /></span>
       ``
          </div>
               <p 
                 style={{position: 'absolute', top: '94px',left:'70px',color:'blue', cursor: 'pointer'}}
                 onClick={() => nav('/family_management')}
               >
                 家庭管理（2人管理中）＞
               </p>
        </div>
        <div className={style.memberCard}>
          <div className={style.memberInfo}>
            <div>
              <img src={img6} alt="" style={{ width: '40px', height: '40px', objectFit: 'contain' }} />
            </div>

            <span className={style.memberText}>会员</span>
          </div>
          <div>
            <Button block shape='rounded' size='small' className={style.privilegeButton}>
              权益中心
            </Button>
          </div>
        </div>

        {/* 二维码卡片 */}
        <div className={style.qrCard} onClick={() => {
          // 获取当前用户数据
          const currentUserData = {
            id: 'current_user',
            name: displayName || '王*柯',
            relation: '本人',
            standing: '2015****10',
            phone: '13800138000',
            sex: '女',
            age: '25',
            birthday: '1998-01-01',
            idType: '居民身份证',
            address: '北京市',
            addressDetail: '朝阳区'
          }
          // 将用户数据编码为URL参数
          const userData = encodeURIComponent(JSON.stringify(currentUserData))
          nav(`/card_detail/${userData}`)
        }}>
          <div className={style.qrCardInfo}>
            <div className={style.userNameInfo}>
              <div className={style.userNameText}>{displayName || '王*柯'} (本人)</div>
              <div className={style.registrationNumber}>登记号: 2015****10</div>
            </div>
            <div className={style.qrCodeIcon}>
              <img src={img7} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div>

      </div>
      <div className={style.functionGrid}>
        {
          data.map((item, index) => {
            return <div key={index} className={style.functionItem}>
              <ul className={style.functionItemList}>
                <li><img src={item.img} alt="" className={style.functionItemIcon} /></li>
                <li className={style.functionItemText}>{item.name}</li>
              </ul>
            </div>
          })
        }
      </div>
      <List>
        <List.Item onClick={() => nav('/address')}>
          收货地址
        </List.Item>
        <List.Item onClick={() => nav('/card')}>
          我的卡券
        </List.Item>
        <List.Item onClick={() => { }}>
          门诊预约
        </List.Item>
        <List.Item onClick={() => nav('/public_Notice')}>
          价格公示
        </List.Item>
        <List.Item onClick={() => { }}>
          意见反馈
        </List.Item>
        <List.Item onClick={() => nav('/agreement')}>
          用户协议
        </List.Item>
        <List.Item onClick={() => nav('/privacy_Policy')}>
          隐私协议
        </List.Item>
        <List.Item onClick={() => nav('/about_us')}>
          关于我们
        </List.Item>
      </List>
    </div>
  )
}
export default Index